import { useGetTasksQuery } from '@shared/api'
import { useResize } from '@shared/lib/hooks/useResize'
import { MenuItem, MenuSection } from '@shared/ui/MenuSection'
import { ReactNode } from 'react'
import { Task } from '../../model/types/Task'
interface TasksMenuListProps {
  onClick?: (task: Task) => void
  renderButton?: () => ReactNode
}

export const TasksMenuList = ({ onClick, renderButton }: TasksMenuListProps) => {
  const { data, isLoading: tasksLoading } = useGetTasksQuery()
  const tasks = data?.slice(0, 4)
  const items: MenuItem[] =
    tasks?.map((item) => ({
      color: 'success',
      icon: 'task',
      title: item.title,
      to: '/tasks',
    })) || []

  const taskClick = (title: string) => {
    const task = tasks?.find((item) => item.title === title)
    task && onClick?.(task)
  }
  const { isScreenMd } = useResize()

  return (
    <>
      {isScreenMd && (
        <MenuSection
          isLoading={tasksLoading}
          menuList={items}
          onClick={taskClick}
          renderButton={renderButton}
          title='Задачи'
        />
      )}
    </>
  )
}

TasksMenuList.displayName = 'TasksMenuList'
